<!--
 * @Author: Christion.Young
 * @Date: 2020-11-24 20:47:50
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-04 14:33:50
 * @Description: file content
-->
<template>
    <div>
        <el-input v-if="seachType==='INPUT'"
                  style="width:80%;"
                  v-model="finalResult"
                  @input="getResults" />
        <el-date-picker v-if="seachType==='DATE'"
                        style="width:80%;"
                        v-model="finalResult"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="getResults">
        </el-date-picker>
        <div v-if="seachType==='TREE'"
             class="treeBoxBig">
            <div class="treeBox">{{showValue}}</div>
            <div class="treeBtnCS"
                 @click="treeBtn"></div>
        </div>
        
        <!-- 所有成员、关系树展示-->
        <div v-if="toShowMemberTree">
        <memberAndTree ref="memberAndTree"
                       :toShowMemberTree="toShowMemberTree"
                       :dictCode="dictCode"
                       :indexItems="indexItems"
                       :itemData="itemData"
                       @selectDataFunc="selectDataFunc"></memberAndTree>
        </div>
    </div>
</template>

<script>
import memberAndTree from '@/components/ca/memberAndTree'
export default {
    components: {
        memberAndTree,
    },
    model: {
        prop: 'finalResult',
        event: 'getResults',
    },
    // 双数据绑定
    event: ['getResults'],
    props: {
        seachType: {
            type: String,
            default: '',
        },
        treeType: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            finalResult: null,
            toShowMemberTree: false,
            dictCode: '',
            indexItems: 0,
            itemData: [],
            showValue: '',
        }
    },
    watch: {},
    mounted() {
        this.$on('bridge', () => {
            this.childAction()
        })
    },
    methods: {
        // 返回结果
        getResults() {
            this.$emit('getResults', this.finalResult)
        },
        selectDataFunc(val) {
            this.toShowMemberTree = false
            if (val != '') {
                if(val.selectionFlag == '2'){
                    this.showValue = val.row.dictItemName
                    this.$emit('getResults', val.row.dictItemCode)
                }
                if(val.selectionFlag == '1'){
                    this.showValue = val.row.name
                    let value = item.filterValue.split('@@@')[0]
                    this.$emit('getResults', value)
                }
                
            }
        },
        treeBtn() {
            this.toShowMemberTree = true
            if (this.treeType == '') {
                this.dictCode = 'OrganUnit'
            } else {
                this.dictCode = this.treeType
            }
            this.$nextTick(() => {
                this.$refs.memberAndTree.init()
            })
        },
        childAction() {
            this.showValue = ''
            this.finalResult = ''
        },
    },
}
</script>
<style lang="scss" scoped>
.treeBoxBig {
    // width: 320px;
    width: 80%;
    height: 32px;
    border: 1px solid #ababab;
    border-radius: 4px;
    .treeBox {
        width: 80%;
        height: 32px;
        padding-left: 10px;
        line-height: 32px;
    }
    .treeBtnCS {
        background: url('~@/assets/images/popWindow_arrow.gif');
        background-repeat: no-repeat;
        height: 32px;
        width: 32px;
        position: absolute;
        // left: 296px;
        right: 20%;
        top: 8px;
        cursor: pointer;
    }
}
</style>

